import React, { Component } from 'react'
// import style from '../index.module.css'
import style from '../ss.module.scss'
// import style from '../ss.module.scss'
import {getGroups} from '../../../api/index'
import { Grid,Flex } from 'antd-mobile';
export default class Group extends Component {
  state = {
    // 租房小组数据
    groups:[],
     // 这里是从轮播图页面拿到的code地图地址码
    cityArea:this.props.cityArea
  }
  // 获取租房小组数据的方法
  async getGroups(){
    console.log('dddddddddddddddddd',this.state.cityArea);
    const res = await getGroups({area:this.state.cityArea})
    // console.log('我是res',res);
    this.setState({
      groups:res.data.body
    })
  }
  componentDidMount(){
    this.getGroups()
  }
  render() {
    return (
      <div className={style.group}>
        <h3 >
            租房小组 
            <span >更多</span>
        </h3>
        <div className={style.groups}>
         <Grid data={this.state.groups} square={false}  hasLine={false} columnNum={2}  renderItem={dataItem => (
             <Flex justify="around" key={dataItem.id}>
               <div className='desc'>
                    <p className={style.title}>{dataItem.title}</p>
                    <span className={style.info}>{dataItem.desc}</span>
                </div>  
                <img  src={`http://localhost:8080${dataItem.imgSrc}`} alt="" />
            </Flex>
          )}
          />
        </div>
      </div>
    )
  }
}
